<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 用户管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>用户信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.name" placeholder="请输入回收员或发布用户姓名" class="handle-input mr10" clearable></el-input>
                <el-select v-model="query.state" placeholder="请选择订单状态" clearable>
                    <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="handle-box">
                <el-date-picker
                        v-model="dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="发布时间开始"
                        end-placeholder="发布时间结束"
                        @change="dateChange" clearable>
                </el-date-picker>
                <el-button style="display: inline-block; margin-left: 10px" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button style="display: inline-block; margin-left: 10px" type="primary" icon="el-icon-search" @click="handleExcel">导出Excel</el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="订单号" width="160" align="center"></el-table-column>
                <el-table-column prop="employerName" label="发布用户" show-overflow-tooltip=true width="100"></el-table-column>
                <el-table-column prop="collectorName" label="回收员"></el-table-column>
                <el-table-column prop="totalWeight" label="总重量(KG)" :formatter="handleWeight" width="100"></el-table-column>
                <el-table-column prop="amount" label="总金额(￥)" :formatter="handleAmount" width="100"></el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip=true width="180"></el-table-column>
                <el-table-column prop="createTime" label="发布时间" show-overflow-tooltip=true width="180"></el-table-column>
                <el-table-column prop="subscriptionTime" label="预约时间" show-overflow-tooltip=true width="180"></el-table-column>
                <el-table-column prop="finishTime" label="完成时间" show-overflow-tooltip=true width="180"></el-table-column>
                <el-table-column prop="state" label="状态" :formatter="handleState"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleDetail(scope.$index, scope.row)">详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                               :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <el-dialog title="详情" v-model="detailVisible" width="50%">
            <el-descriptions title="发布用户信息" direction="vertical" :column="4" border>
                <el-descriptions-item label="姓名">{{detailData.employer.name}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{detailData.employer.phone}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="回收员信息" direction="vertical" :column="4" border v-if="showCol">
                <el-descriptions-item label="姓名">{{detailData.collector.name}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{detailData.collector.phone}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="订单基本信息" direction="vertical" :column="2" border>
                <el-descriptions-item label="订单状态">{{orderState}}</el-descriptions-item>
                <el-descriptions-item label="发布时间">{{detailData.order.createTime}}</el-descriptions-item>
                <el-descriptions-item label="预约时间">{{detailData.order.subscriptionTime}}</el-descriptions-item>
                <el-descriptions-item label="总金额(￥)">{{amount}}</el-descriptions-item>
                <el-descriptions-item label="总重量(KG)">{{weight}}</el-descriptions-item>
                <el-descriptions-item label="完成时间">{{finishTime}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="回收物详情" direction="vertical" :column="1" border>
                <el-descriptions-item label="回收物图片">
                    <el-image style="width: 200px; height: 150px" fit="fit" :src="imageUrl"></el-image>
                </el-descriptions-item>
            </el-descriptions>
            <el-table :data="detailData.details" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="categoryName" label="回收物类别" width="140" align="center"></el-table-column>
                <el-table-column prop="itemName" label="回收物名称" width="140" align="center"></el-table-column>
                <el-table-column prop="weight" label="重量(KG)" :formatter="handleWeight" width="140" align="center"></el-table-column>
                <el-table-column prop="amount" label="金额(￥)" :formatter="handleAmount" width="140" align="center"></el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import { onActivated, ref, reactive, inject, toRaw } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { getOrderList, fenToYuan, gToKg, getOrderDetail, getOrderExcel, dateConvert } from "../../api";


    export default {
        name: "order",
        setup() {
            const loading = ref(true);
            const query = reactive({
                pageNum: 1,
                pageSize: 10,
                total: 0,
                name: '',
                state: null,
                beginTime: null,
                endTime: null
            });
            const dd = ref('');
            const showCol = ref(false);
            const items = [
                {id: 0, name: "待接单"},
                {id: 1, name: "待回收"},
                {id: 2, name: "已回收"},
                {id: 3, name: "已完成"},
                {id: 4, name: "已取消"},
                {id: 5, name: "已超时"},
            ];
            const tableData = ref([]);
            const pageTotal = ref(0);
            const detailVisible = ref(false);

            // 获取表格数据
            const getData = () => {
                loading.value = true;
                getOrderList(query).then((res) => {
                    tableData.value = res.data.content;
                    query.total = res.data.count;
                    loading.value = false;
                });
            };
            getData();

            const dateChange = (e) => {
                const res = toRaw(e);
                console.log(e);
                if (!e) {
                    query.beginTime = null;
                    query.endTime = null;
                } else {
                    let date1 = new Date(res[0]);
                    let date2 = new Date(res[1]);
                    query.beginTime = dateConvert(date1, true);
                    query.endTime = dateConvert(date2, false);
                    console.log(query.beginTime, query.endTime)
                }
            };

            // 查询操作
            const handleSearch = () => {
                query.pageNum = 1;
                getData();
            };
            // 分页导航
            const handlePageChange = (val) => {
                query.pageNum = val;
                getData();
            };


            const handleState = (row, column) => {
                if (row.state === 0) return "待接单";
                if (row.state === 1) return "待回收";
                if (row.state === 2) return "已回收";
                if (row.state === 3) return "已完成";
                if (row.state === 4) return "已取消";
                if (row.state === 5) return "已超时";
                return "";
            };
            const handleWeight = (row, column) => {
                const res = gToKg(row.totalWeight);
                return res === 0 ? "暂无":res;
            };
            const handleAmount = (row, column) => {
                const res = fenToYuan(row.amount);
                return res === 0 ? "暂无":res;
            };

            const detailData = ref({});
            const imageUrl = ref('');
            const orderState = ref(null);
            const weight = ref(null);
            const amount = ref(null);
            const finishTime = ref(null);
            // 表格详情弹窗
            const handleDetail = (index, row) => {
                console.log(row);
                getOrderDetail(row.id).then(res => {
                    if (res.code === 200) {
                        console.log(res);
                        detailData.value = res.data;
                        imageUrl.value = res.data.order.url;
                        orderState.value = handleState(res.data.order, '');
                        weight.value = handleWeight(res.data.order, '');
                        amount.value = handleAmount(res.data.order, '');
                        finishTime.value = !res.data.order.finishTime ? "暂无":res.data.order.finishTime;
                        if (res.data.order.state == 1 || res.data.order.state == 2 || res.data.order.state == 3) {
                            showCol.value = true;
                        }
                        detailVisible.value = true;
                    } else {
                        ElMessage.error('服务器繁忙，请稍后重试');
                    }
                })
            };

            const handleExcel = () => {
                getOrderExcel(query).then(res => {
                    console.log(res);
                    const link = document.createElement("a");
                    link.style.display = "none";
                    link.href = URL.createObjectURL(res);
                    link.setAttribute("download", "订单信息.xlsx");
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })
            };


            onActivated(() => {
                getData();
            });

            return {
                query,
                tableData,
                pageTotal,
                detailVisible,
                detailData,
                items,
                showCol,
                imageUrl,
                orderState,
                weight,
                amount,
                finishTime,
                dd,
                loading,
                handleSearch,
                handlePageChange,
                handleDetail,
                handleState,
                handleWeight,
                handleAmount,
                handleExcel,
                dateChange
            };
        },
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
</style>
